<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ES6类</title>
</head>
<body>
  <script>
    /* 
    注意: React会使用class
    ES6类  构造器/ 实例属性 / 方法
      构造器: 用来初始化实例属性
      实例属性  propName = value  可以是一般的/可以函数
          function函数: this可能是实例对象, 也可能是其它
          箭头函数 ==> 无论怎么调用, this都是实例对象 (使用构造器的this)
      方法: 在原型对象上
    */
    /* 
    需求: 
        现在2个人, 都有姓名与年龄(值自己指定), 都能自我介绍自己的姓名和年龄
        现在又有了一个学生, 它有身价的属性, 能介绍它的所有信息
    */

    class Person {
      // 构造器函数 => 用来初始化实例对象的属性/方法
      constructor (name, age) {
        this.name = name
        this.age = age

        /* this.test2 = () => {
          console.log('test2()', this)
        }
        this.test = function () {
          console.log('test', this)
        } */
      }

      // test在哪?  ==> 在实例对象上
      test = function () {
        console.log('test', this)
      }

      // 给实例对象添加属性 => 本质上是定义在构造器中执行的
      // 等价于构造器中的代码 => 使用的是构造器中的this
      test2 = () => {
        console.log('test2()', this)
      }

      // 方法 ==> 原型对象的方法  
      // 问题: 是在实例对象上吗?
      sayInfo () {
        console.log(`我叫${this.name}, 今年${this.age}`)
      }
    }

    const p1 = new Person('A', 20)
    const p2 = new Person('B', 22)
    p1.sayInfo()
    p2.sayInfo()
    console.log(p1, p2)
    p1.test()
    p1.test2()

    // (ES6 class中的方法内部声明了严格模式)
    const fn1 = p1.test  // test是function函数  ==> undefined 
    // 箭头函数定义在了构造器中, 使用的是构造器的this
    const fn2 = p1.test2  // test2是箭头函数  ==> 实例对象  
    fn1()
    fn2()

    
  </script>
</body>
</html>